<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <title>请假审批</title>
  <!--/*--> 引入css、jq、layui等样式、js <!--*/-->
  <meta th:include="~{layout/layout_head :: head}">
  <style>
    .text-right {
      text-align: right;
    }
  </style>
</head>
<body>
<div style="margin-top: 15px;padding: 0 45px;">
  <h1 style="text-align: center">请假审批</h1>
  <br>
  <table class="layui-table" lay-size="lg">
    <colgroup>
      <col width="150">
      <col width="400">
      <col width="150">
      <col width="400">
    </colgroup>
    <tbody>
    <tr>
      <td class="text-right">账号</td>
      <td>[[${vo.username}]]</td>
      <td class="text-right">名称</td>
      <td>[[${vo.name}]]</td>
    </tr>
    <tr>
      <td class="text-right">归属部门</td>
      <td>[[${vo.departmentName}]]</td>
      <td class="text-right">部门编码</td>
      <td>[[${vo.departmentCode}]]</td>
    </tr>
    <tr>
      <td class="text-right">职位</td>
      <td>[[${vo.jobName}]]</td>
      <td class="text-right">标题</td>
      <td>[[${vo.title}]]</td>
    </tr>
    <tr>
      <td class="text-right">开始时间</td>
      <td>[[${vo.startDate}]]</td>
      <td class="text-right">结束时间</td>
      <td>[[${vo.endDate}]]</td>
    </tr>
    <tr>
      <td class="text-right">请假时长</td>
      <td colspan="3" style="color: red;">[[${vo.dateBetween}]]</td>
    </tr>
    <tr>
      <td class="text-right">描述</td>
      <td colspan="3">[[${vo.description}]]</td>
    </tr>
    <tr>
      <td colspan="4" style="text-align: center">
        <button class="layui-btn" id="approval">同 意</button>&nbsp;&nbsp;&nbsp;&nbsp;
        <button class="layui-btn layui-btn-warm" id="noApproval">不同意</button>
      </td>
    </tr>
    </tbody>
  </table>
  <br>
  <br>
  <hr class="layui-bg-red">
  <button class="layui-btn layui-btn-normal" id="see">查看流程</button>
  <br>
  <!--/*--> 隐藏域 <!--*/-->
  <input type="hidden" id="id" th:value="${processId}">
  <input type="hidden" id="url" th:value="${'/processDetail/'+processId}">
  <iframe id="process" style="width: 95%;height: 720px;display: none"></iframe>
</div>
</body>
<script>
  layui.use(['form', 'layer', 'jquery'], function () {
    var form = layui.form;
    var layer = layui.layer;
    var $ = layui.jquery;
    $('#see').on('click', function () {
      if ($('#process').css('display') === 'none') {
        if ($('#process').attr('src') === undefined) {
          $('#process').attr('src', $('#url').val())
        }
        $('#process').show()
      } else {
        $('#process').hide()
      }
    });

    //同意
    $('#approval').on('click', function () {
      layer.confirm('确认要通过该请假申请吗？', {icon: 1, title: '提示'}, function (index) {
        layer.prompt({
          formType: 2,
          value: '同意',
          title: '请输入审批意见',
          area: ['300px', '200px'] //自定义文本域宽高
        }, function (value, indexx, elem) {
          $.ajax({
            sync: false,
            type: 'post',
            data: {"message": value, "approval": 1},
            url: '/admin/approvalLeave/' + $('#id').val(),
            success: function (data) {
              layer.msg(data.message)
              if (data.code == 0) {
                window.setTimeout(function () {
                  window.close()
                }, 1800)
              }
            }
          })
          layer.close(indexx);
        });
        layer.close(index);
      });
    });

    //不同意
    $('#noApproval').on('click', function () {
      layer.confirm('确认要不同意该请假申请吗？流程将被打回', {icon: 3, title: '提示'}, function (index) {
        layer.prompt({
          formType: 2,
          value: '不同意',
          title: '请输入审批意见',
          area: ['300px', '200px'] //自定义文本域宽高
        }, function (value, indexx, elem) {
          $.ajax({
            sync: false,
            type: 'post',
            data: {"message": value, "approval": 0},
            url: '/admin/approvalLeave/' + $('#id').val(),
            success: function (data) {
              layer.msg(data.message)
              if (data.code == 0) {
                window.setTimeout(function () {
                  window.close()
                }, 1800)
              }
            }
          })
          layer.close(indexx);
        });
        layer.close(index);
      });
    })
  })
</script>
</html>
